<template>
    <div class='dataList'>
        <!-- 分页显示疫情数据 -->
        <!-- 上报按钮 -->
        <el-button size='small' @click='toAddPage'>上报</el-button>
        <!-- 表格 -->
        <el-table
            size='small'
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="编号"
                width="80">
            </el-table-column>
            <el-table-column
                prop="country"
                label="国"
                width="80">
            </el-table-column>
            <el-table-column
                prop="province"
                label="省"
                width='100'>
            </el-table-column>
            <el-table-column
                prop="city"
                label="市"
                width='100'>
            </el-table-column>
            <el-table-column
                prop="area"
                label="区"
                width='100'>
            </el-table-column>
            <el-table-column>
            </el-table-column>
            <el-table-column
                prop="confirmed"
                label="新增"
                width='80'>
            </el-table-column>
            <el-table-column
                prop="suspected"
                label="疑似"
                width="80">
                <template v-slot="scope">
                    <el-tag type='success'>{{scope.row.suspected}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="dead"
                label="死亡"
                width="80">
                <template v-slot="scope">
                    <el-tag type='info'>{{scope.row.dead}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="cure"
                label="治愈"
                width="80">
                <template v-slot="scope">
                    <el-tag type='warning'>{{scope.row.cure}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="severe"
                label="重症"
                width="80">
                <template v-slot="scope">
                    <el-tag type='danger'>{{scope.row.severe}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="outside"
                label="境外输入"
                width="80">
                <template v-slot="scope">
                    <el-tag>{{scope.row.outside}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="inputTime"
                label="输入时间"
                width='200'>
                <template v-slot='scope'>
                    {{scope.row.inputTime | dateFMT}}
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size='params.pageSize'
            :current-page='params.page'
            :total="total" @current-change='pageChange'>
        </el-pagination>
    </div>
</template>

<script>
import axios from '@/http/axios'
import moment from 'moment'
export default {
    data(){
        return {
            tableData:[],
            total:0,
            params:{
                page:1,
                pageSize:10
            }
        }
    },
    filters:{
        dateFMT(str){
            return moment(str).format('YYYY-MM-DD HH:mm:ss')
        }
    },
    created(){
        this.queryPage()
    },
    watch:{
        params:{}
    },
    methods:{
        pageChange(page){
            // page表示当前点击的页码
            this.params.page = page
        },
        // 跳转至数据上报页面
        toAddPage(){
            this.$router.push({
                path:'/data/report'
            })
        },
        // 分页查询数据
        queryPage(){
            axios({
                url:'http://121.199.29.84:8001/epidemic/pageQuery',
                method:'get',
                params:this.params
            }).then((res)=>{
                // 分页的总条数
                this.total = res.data.data.total;
                // 表格数据
                this.tableData = res.data.data.list
            })
        },
    },
    watch:{
            params:{
                // :表示深度监听
                handler:function(){
                    this.queryPage()
                },
                deep:true
            }
    },
}
</script>